<template>
  <Modal
    :active="trimModalVueActive"
    transfer
    title="修剪"
    draggable
    hide-mask
    :width="650"
    :no-footer="true"
    @close="closeBtn"
  >
    <div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">方法</div>
      </div>
      <div class="selectorBox">
        <RadioGroup>
          <Radio
            v-for="(item, index) in radiogroupList"
            :key="item"
            :label="item"
          >
            <div class="radio_item">{{ item }}</div>
          </Radio>
        </RadioGroup>
      </div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">目标</div>
      </div>
      <div class="selectorBox">
        <div class="selector-container">
          <div>
            <Dropdown placement="right">
              <Button class="selector-button2"
                ><img
                  src="../assets/lowerTriangle.svg"
                  alt=""
                  class="icon imgStyle"
              /></Button>

              <template #drop>
                <DropdownList>
                  <DropdownItem
                    v-for="(item, index) in dropdownOptions"
                    :key="index"
                    @select="selectOption(item)"
                  >
                    {{ item }}
                  </DropdownItem>
                </DropdownList>
              </template>
            </Dropdown>
          </div>
          <div class="selector-buttons">
            <button class="selector-button active">
              {{ selectedOption }}
            </button>
            <button class="selector-button icon-button">
              <img src="../assets/delete.svg" alt="" class="icon imgStyle" />
            </button>
          </div>
        </div>
      </div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">Tool</div>
      </div>
      <div class="selectorBox">
        <RadioGroup>
          <Radio v-for="(item, index) in toolList" :key="item" :label="item">
            <div class="radio_item">{{ item }}</div>
          </Radio>
        </RadioGroup>

        <div class="toolChose">
          <div class="toolChose_text"></div>
          <div>
            <div class="selector-container">
              <div>
                <Dropdown placement="right">
                  <Button class="selector-button2"
                    ><img
                      src="../assets/lowerTriangle.svg"
                      alt=""
                      class="icon imgStyle"
                  /></Button>

                  <template #drop>
                    <DropdownList>
                      <DropdownItem
                        v-for="(item, index) in dropdownOptions2"
                        :key="index"
                        @select="selectOption2(item)"
                      >
                        {{ item }}
                      </DropdownItem>
                    </DropdownList>
                  </template>
                </Dropdown>
              </div>
              <div class="selector-buttons">
                <button class="selector-button active">
                  {{ selectedOption2 }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="toolChose">
          <div class="toolChose_text">平面法向</div>
          <div>
            <div class="selector-container">
              <div>
                <Dropdown placement="right">
                  <Button class="selector-button2"
                    ><img
                      src="../assets/lowerTriangle.svg"
                      alt=""
                      class="icon imgStyle"
                  /></Button>

                  <template #drop>
                    <DropdownList>
                      <DropdownItem
                        v-for="(item, index) in dropdownOptions3"
                        :key="index"
                        @select="selectOption3(item)"
                      >
                        {{ item }}
                      </DropdownItem>
                    </DropdownList>
                  </template>
                </Dropdown>
              </div>
              <div class="selector-buttons">
                <button class="selector-button active">
                  {{ selectedOption3 }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="toolChose">
          <div class="toolChose_text">平面起始</div>
          <div>
            <div class="selector-container">
              <div>
                <Dropdown placement="right">
                  <Button class="selector-button2"
                    ><img
                      src="../assets/lowerTriangle.svg"
                      alt=""
                      class="icon imgStyle"
                  /></Button>

                  <template #drop>
                    <DropdownList>
                      <DropdownItem
                        v-for="(item, index) in dropdownOptions4"
                        :key="index"
                        @select="selectOption4(item)"
                      >
                        {{ item }}
                      </DropdownItem>
                    </DropdownList>
                  </template>
                </Dropdown>
              </div>
              <div class="selector-buttons">
                <button class="selector-button active">
                  {{ selectedOption4 }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="parameter_tangent">
          <Checkbox v-model:checked="checked"> 切向 </Checkbox>
        </div>
      </div>
      <div class="foot-box">
        <Button type="primary" size="small" @click="confirm">修剪</Button>
        <Button type="default" size="small" @click="closeBtn">回退</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Button,
  Select,
  NumberInput,
  Checkbox,
  RadioGroup,
  Radio,
  Dropdown,
  DropdownList,
  DropdownItem,
} from "cax-ui";
import { useCoreStore, _global } from "@/UI/store";
import { storeToRefs } from "pinia";
const coreStore = useCoreStore();
const { trimModalVueActive } = storeToRefs(coreStore);
const parameterNumber = ref();
const checked = ref(false);
const radiogroupList = ref(["平面/面", "线", "节点"]);
const toolList = ref(["平面", "面", "共有的"]);

const dropdownVisible = ref(false);
const selectedOption = ref("");
const dropdownOptions = ref(["壳/实体", "面", "曲线"]);

const dropdownVisible2 = ref(false);
const selectedOption2 = ref("");
const dropdownOptions2 = ref([
  "Normal & Origin",
  "Normal to Curve",
  "Tangent with Surf",
  "Fit Curves",
  "Fit Points",
  "Between 2 Points",
  "Parameter",
]);

const dropdownVisible3 = ref(false);
const selectedOption3 = ref("");
const dropdownOptions3 = ref([
  "X轴",
  "Y轴",
  "Z轴",
  "过点N1到点N2",
  "过三点N1,N2,N3的平面",
  "切边向",
  "平面的法向",
  "输入",
]);

const dropdownVisible4 = ref(false);
const selectedOption4 = ref("");
const dropdownOptions4 = ref([
  "节点",
  "节点中心",
  "二维单元中心",
  "三维单元中心",
  "顶点",
  "在曲线上",
  "在面上",
  "输入",
]);

function confirm() {
  trimModalVueActive.value = false;
}
function closeBtn() {
  trimModalVueActive.value = false;
}
function selectOption(option) {
  selectedOption.value = option;
  dropdownVisible.value = false;
}
function selectOption2(option) {
  selectedOption2.value = option;
  dropdownVisible2.value = false;
}
function selectOption3(option) {
  selectedOption3.value = option;
  dropdownVisible3.value = false;
}
function selectOption4(option) {
  selectedOption4.value = option;
  dropdownVisible4.value = false;
}
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.chose-box {
  margin-left: 70px;
  margin-bottom: 10px;
}
.radio_item {
  display: inline-block;
  width: 120px;
}

.parameter_number {
  padding: 0 25px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
.parameter_numberinput {
  width: 40%;
}
.parameter_tangent {
  padding-left: 25px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.createTo-box {
  padding: 0 25px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
}
.createTo-btn {
  margin-left: 10px;
}
.foot-box {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: right;
}
.createTo-text {
  margin-left: 10px;

  height: 30px;
  line-height: 30px;
}
.createTo-select {
  width: 40%;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-buttons2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 170px;
}
.selector-button {
  height: 32px;
  width: 200px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}
.imgStyle {
  width: 20px;
  height: 20px;
}
.radio_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.selector-container {
  position: relative;
  padding-left: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.dropdown-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 200px; */
  height: 32px;
  padding: 8px 10px;
  /* background-color: #e6f7a7; */
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 70px;
  width: 200px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 10;
  margin-top: 2px;
}

.dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}
.toolChose {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
}
.toolChose_text {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.selector-button2 {
  height: 32px;
  width: 42px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}
:deep(.vxp-button-vars) {
  --vxp-button-min-width: none;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
</style>
